import React, {
  Component,
  forwardRef,
  useImperativeHandle,
  useRef,
  useState,
  useInsertionEffect,
  useEffect,
} from "react";
const MyInput = forwardRef((props, ref) => {
  let [state, setState] = useState(0);
  let updateVal = (e) => {
    setState(e);
  };
  useInsertionEffect(() => {
    console.log("useInsertionEffect");
  });
  useEffect(() => {
    console.log("useEffect");
  });
  useImperativeHandle(ref, () => {
    return {
      updateVal,
    };
  });
  return (
    <>
      <h1>{state}</h1>

      <h1>expose</h1>
    </>
  );
});

export default function Expose() {
  let iptRef = useRef();
  let inputRef = useRef();
  let upateIpt = () => {
    console.log(iptRef, "ref");
    iptRef.current.updateVal(inputRef.current.value);
  };
  return (
    <>
      <MyInput ref={iptRef}></MyInput>
      <input ref={inputRef} type="text" />
      <button onClick={upateIpt}>修改值</button>
    </>
  );
}
